<template lang="pug">
ul.nav-wrap
  li(
    v-for="item,index in list",
    :key="item.name",
    @click="goNav(index)",
    :class="curIndex == index ? 'active' : ''"
  ) 
    i.iconfont(:class="item.icon")
    span {{item.name}}
</template>
<script>
export default {
  name: "navs",
  data() {
    return {
      list: [
        { name: "首页", path: "home",icon:'icon-icon207'},
        { name: "品鉴", path: "pinjian",icon:'icon-chabei' },
        { name: "茶馆", path: "judge",icon:'icon-chahu' },
        { name: "我的", path: "my",icon:'icon-my' },
      ],
      curIndex:0
    };
  },
  methods: {
    goNav(index){
      this.curIndex = index
      this.$router.push({
        path:this.list[index].path,
        query:{
          id:index
        }
      }).catch(err=>err)
    }
  },
  mounted(){
    setTimeout(()=>{
      this.curIndex = this.$route.query.id?this.$route.query.id:0
    },100)
  }
};
</script>
<style scoped lang="scss">
.nav-wrap {
  position: fixed;
  bottom:0;
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  height: 1rem;
  font-size: .24rem;
  align-items: center;
  background: #fff;
  li {
    width: 25%;
    display: flex;
    flex-direction:column;
    align-items: center;
    i{
      margin-top: .14rem;
    }
    &.active i{
      color:#a8978a;
    }
    span {
      line-height: .54rem;
    }
  }
}
</style>